<template>
    <view class="page">
		<uv-tabs v-if="tabList.length > 1" class="tabs" :list="tabList" :current="activeTabIndex" @click="onTabChange" key-name="title" line-color="#04BABE" :activeStyle="{ color: '#1b1b1b', fontWeight: 'bold', fontSize: '15px'}" :inactiveStyle="{ color: '#1b1c1c', fontSize: '14px'}"></uv-tabs>
		
        <view class="pannel" v-if="activeTab == 'text'">
            <view class="title" v-if="tabList.length === 1">{{ '分享文案' | lang }}</view>
			<view class="textarea">
				<view v-html="currentText + '<br>' + share.h5url"></view>
			</view>
			<view class="btn-group">
				<view class="btn btn-copy" @tap="copyText">{{ '复制文案' | lang }}</view>
				<view class="btn btn-next" @tap="nextText" v-if="share.textArr.length > 1">{{ '换一个' | lang }}</view>
			</view>
        </view>
        <view class="pannel" v-if="activeTab == 'haibao'">
            <view class="title" v-if="tabList.length === 1">{{ '我的海报' | lang }}</view>
			<swiper class="poster-list" @change="swiperChange" :indicator-dots="true" :current="currentHaibao" :circular="true" :autoplay="false" previous-margin="-10rpx" next-margin="-10rpx">
				<swiper-item class="item" v-for="item in share.haibaoArr">
					<view class="poster" :style="'width: ' + (item.bg_w * item.scale) + 'rpx; height: ' + (item.bg_h * item.scale) + 'rpx;'">
						<image :src="item.bg" style="width: 100%; height: 100%;"></image>
						<image :src="share.qrcode" :style="'left: '+ (item.hole_x * item.scale) + 'rpx; top: ' + (item.hole_y * item.scale) + 'rpx; width: ' + (item.hole_w * item.scale) + 'rpx; height:' + (item.hole_h * item.scale) + 'rpx;'"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="btn-group" style="margin-top: 100rpx;">
				<view class="btn btn-save" @tap="saveToAlbum">{{ '下载海报图片' | lang }}</view>
			</view>
        </view>
		
		<view class="welcome" v-if="(!share.textArr || share.textArr.length === 0) && (!share.haibaoArr || share.haibaoArr.length === 0)">
			<view class="nodata">
				<image mode="widthFix" src="/static/images/ic_nodata.png"></image>
				<view class="tips">暂无内容~</view>
			</view>
		</view>
        
        <canvas canvasId="poster" style="display:block; height: 4000rpx; width: 4000rpx; position: absolute; left: -4000rpx; top: -4000rpx;"></canvas>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            share: {},
			currentHaibao: 0,
			currentText: '',
			siteroot: '',
			tabList: [],
			activeTab: '',
			activeTabIndex: 0
        };
    },
    onLoad() {
		this.getShare()
		this.setData({
			system: app.globalData.system,
			siteroot: app.globalData.siteroot.replace('/web.php', '')
		});
    },
    onShow() {
		uni.setNavigationBarTitle({
			title: this.$lang('邀请好友')
		})
    },
    methods: {
        getShare: function() {
			app.globalData.util.request({
				url: '/commission/getShare',
				data: {
					platform: 'h5'
				}
			}).then(res => {
				const share = res.data
				this.setData({
					share: share,
					currentText: res.data.defaultText,
					currentHaibao: res.data.defaultHaibao
				})
				let tabList = []
				if (share.haibaoArr && share.haibaoArr.length > 0) {
					tabList.push({
						id: 'haibao',
						title: '分享海报'
					})
					this.setData({
						tabList: tabList,
						activeTab: 'haibao'
					})
				}
				if (share.textArr && share.textArr.length > 0) {
					tabList.push({
						id: 'text',
						title: '分享文案'
					})
					this.setData({
						tabList: tabList,
						activeTab: this.activeTab == 'haibao' ? 'haibao' : 'text'
					})
				}
			})
		},
		onTabChange(item) {
			this.activeTab = item.id;
			this.activeTabIndex = item.index;
		},
		copyText() {
			var text = this.currentText
			if(!text) {
				return false
			}
			text += "<br>" + this.share.h5url
			text = text.replaceAll("<br>", "\n");
			uni.setClipboardData({
				data: text,
				success: function() {
					app.globalData.util.message('复制成功')
				}
			})
		},
		nextText() {
			var currentText = this.currentText
			var textArr = this.share.textArr
			if(!textArr || textArr.length <= 1) {
				app.globalData.util.message('没有更多了')
				return false
			}
			textArr.forEach((item, index) => {
				if(item.content == currentText) {
					// 切换到下一个
					if(index === textArr.length -1) {
						this.setData({
							currentText: textArr[0]['content']
						})
					} else {
						this.setData({
							currentText: textArr[index+1]['content']
						})
					}
				}
			})
		},
		swiperChange: function(e) {
			this.setData({
				currentHaibao: e.detail.current
			})
		},
		saveToAlbum: function() {
			const haibaoArr = this.share.haibaoArr
			const currentHaibao = this.currentHaibao
			const haibao = haibaoArr[currentHaibao]
			const qrcode = this.share.qrcode
			const poster = 'https://' + window.location.host + '/web.php/commission/makePoster?bg=' + encodeURIComponent(haibao.bg) + '&qrcode=' + encodeURIComponent(qrcode) + '&hole_w=' + haibao.hole_w + '&hole_h=' + haibao.hole_h + '&hole_x=' + haibao.hole_x + '&hole_y=' + haibao.hole_y;
			
			app.globalData.util.message('请长按弹出的图片->保存到手机', 'error', function() {
				uni.previewImage({
					urls: [poster]
				})
			})
			
		}
    }
};
</script>
<style>
.page {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 110rpx;
    overflow: hidden;
}
.tabs {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 88rpx;
    padding-left: 12rpx;
    box-sizing: border-box;
	margin-top: 30rpx;
}
.pannel {
    width: 690rpx;
    margin: 30rpx auto 0 auto;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
    padding: 30rpx 30rpx 30rpx 30rpx;
    box-sizing: border-box;
    overflow: hidden;
}

.pannel .title {
    width: 100%;
    padding: 0 0 30rpx 0;
    font-size: 28rpx;
    font-weight: bold;
}

.pannel .textarea {
    font-size: 28rpx;
    color: #1b1c1c;
    line-height: 36rpx;
    background: #f3f6f6;
    border-radius: 20rpx;
    padding: 20rpx;
    min-height: 140rpx;
    border: 1px solid #04babe;
}
.pannel .btn-group {
    width: 100%;
    height: 64rpx;
    margin: 60rpx 0 30rpx 0;
    text-align: center;
}
.pannel .btn-group view {
    display: inline-block;
}
.pannel .btn-group .btn {
    width: 200rpx;
	margin: 0 auto;
	font-size: 28rpx;
	font-weight: 500;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
    border-radius: 40rpx;
    background: #04babe;
    color: #fff;
    border: 1px solid #04babe;
    letter-spacing: 1px;
}
.pannel .btn-group .btn:active {
    opacity: 0.8;
}

.pannel .btn-group .btn-next {
    margin-left: 30rpx;
    background: #fff;
    color: #04babe;
}

.pannel .btn-group .btn-save {
    width: 400rpx;
	font-weight: 500;
	color: #ffffff;
	text-align: center;
}

.poster-list {
	width:100%;
    height: 500rpx;
    margin: 20rpx 0;
    overflow: hidden;
}
.poster-list .item {
    overflow: hidden;
}
.poster {
	width: 100%;
	height: 100%;
	position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.poster image {
	position: absolute;
	width: 100%;
	height: 100%;
}
.welcome {
    margin-top: 360rpx;
    position: relative;
    height: 660rpx;
}
  
.welcome .nodata {
    width: 600rpx;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.welcome .nodata image {
    width: 300rpx;
    height: 300rpx;
}
.welcome .nodata .tips {
    width: 100%;
    color: #8d9393;
    font-size: 32rpx;
    margin-top: 40rpx;
}

</style>
